<template>
  <div>
    <Content style="text-align:center">
        <Form :label-width="100">
            <FormItem label="选择供应商">
              <Select placeholder="请选择供应商" style="width: 220px" v-model="orgId" :disabled="orgFreeze">
                <Option v-for="item in seletions" :value="item.orgId" :key="item.orgId">{{item.orgName}}</Option>
              </Select>
            </FormItem>
            <FormItem label="选择导入文件">
              <Upload
                :before-upload="bfUploadExcel"
                :format="['xls','csv','xlsx']"
                :max-size="51200"
                :on-format-error="formatErrorExcel"
                :on-exceeded-size="maxSizeExcel"
                action="http">
                <Button icon="ios-cloud-upload-outline">
                <span v-if="hasExcelFile">{{excelFile.name+'('+excelFile.sizeTips+')'}}</span>
                <span v-else>请选择Excel模板文件导入商品</span>
                </Button>
              </Upload>
            </FormItem>
            <FormItem label="模板下载">
              <a href="https://view-assets.oss-cn-chengdu.aliyuncs.com/files/%E5%95%86%E5%93%81%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF0000.xlsx" target="_blank">点击下载Excel导入模板</a>
            </FormItem>
            <Button type="primary" @click="Submit">导入</Button>
        </Form>
    </Content>
  </div>
</template>
<script>
export default {
  name: 'ImportExcelVue',
  props: {
    callbank: Function,
    seletions: Array
  },
  data() {
    return {
        excelFile: {},
        orgId: this.$store.getOrg('orgId'),
        orgName: this.$store.getOrg('orgName'),
        hasExcelFile: false,
        orgFreeze: this.$store.getUser('userType') !== 9
    }
  },
  methods: {
    //初始化
    Init() {
        this.hasExcelFile = false
        this.excelFile={}
    },
    Submit(){
      this.seletions.forEach(element => {
				if(this.orgId === element.orgId) {
					this.orgName = element.orgName
				}
			})

      new this.$rest({
        gateway: 'agroerp',
        service: "agroerp-shop",
        url: "/v1.0/agromall/import/sku",
        form: {
          binaryFile: this.excelFile.file,
          orgId: this.orgId,
          orgName: this.orgName,
          shopId: this.$store.getShop('shopId'),
          shopName: this.$store.getShop('shopName'),
          storeId: this.$store.getWms('warehouseId'),
          salesModel: this.$store.getShop('shopType'),
          regionCode: this.$store.getWms('countyCode')
        },
        action: (res) => {
          if (res.data.code === 20000) {
            this.$Message.success({
              content: "导入成功",
              onClose: () => {
                this.callbank()
              },
            })
          } else {
            this.$Notice.warning({
              title: "批量导入商品失败",
              desc: res.data.msg,
            });
          }
        }
      }).upload()
    },
    bfUploadExcel (file) {
        this.excelFile.file = file
        this.excelFile.name = file.name
        this.excelFile.sizeTips = this.$size(file.size)
        this.hasExcelFile = true
        console.log('选择文件 ->',this.excelFile)
        return false
    },
    formatErrorExcel(file) {
        this.$Notice.warning({
            title: '文件格式不支持',
            desc: `${file.name}文件格式不支持，请使用xls,csv,xlsx`
        })
    },
    maxSizeExcel(file) {
        this.$Notice.warning({
            title: '文件过大',
            desc: `${file.name}文件大小不能超过50M`
        })
    }
  },
  created() {
    
  },
};
</script>

<style lang="less" scoped>
.cust-form {
  text-align: left !important;
}
</style>
